﻿@{
    Layout = "~/Areas/Master/Views/Shared/_Layout.cshtml";
}
@section Header{
    <link href="~/Areas/Master/Common/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script src="~/Areas/Master/Common/js/ztree/jquery.ztree.core-3.5.min.js"></script>
    <script type="text/javascript">
        var objTree;
        var nodes = @Html.Raw(ViewBag.Tree);
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: ""
                }
            },
            view: {
                showIcon: false
            },
            callback: {
                onClick: function(event, treeId, treeNode) {
                    getColumns(treeNode.id);
                }
            }
        };

        function getColumns(id) {
            Utils.ajax({
                url: '@Url.Action("GetColumns")',
                data: { 'ID': id },
                type: 'POST',
                success: function(d) {
                    if (d) {
                        var tbl = $('#colTable tbody');
                        tbl.empty();
                        $.each(d, function(i, n) {
                            var tr = $('<tr>' +
                                '<td class="center"><input type="checkbox" class="cboItem" /></td>' +
                                '<td class="center">' + n.Code + '</td>' +
                                '<td>' + n.Title + '</td>' +
                                '<td class="center">' + (n.Type == 0 ? "模型" : "链接") + '</td>' +
                                '<td>' + (n.Type == 0 ? n.ModelCode : n.NavigateUrl) + '</td>' +
                                '<td><input type="text" class="sort large textinput sort center" value="' + n.Sort + '" id="Sort_' + n.ColumnID + '"/></td>' +
                                '</tr>');
                            tbl.append(tr);
                        });
                    }
                },
                error: function(status) {}
            });
        }

        $(function() {
            objTree = $.fn.zTree.init($("#channelTree"), setting, nodes);
            getColumns(0);
        });

        function save() {
            var menuIDs = [];
            $('.sort').each(function (i, n) {
                var id = $(n).attr('id');
                menuIDs.push('{"Key":"' + id.substring(5, id.length) + '", "Value":' + $(n).val() + '}');
            });
            if (menuIDs.length <= 0) {
                Utils.alert('消息', '无菜单');
                return;
            }

            Utils.ajax({
                url: '@Url.Action("Save")',
                data: { 'sorts': '[' + menuIDs.join(',') + ']' },
                type: 'POST',
                success: function (d) {
                    if (d.Result) location.reload();
                },
                error: function (status) { }
            });
        }

        function add() {
            $("#addDialog").dialog({
                title: '添加栏目',
                modal: true,
                width: 600,
                buttons: [
                    {
                        text: "确定",
                        click: function () {
                            Utils.ajax({
                                url: '@Url.Action("Add")',
                                action: 'ADD',
                                data: { 'ParentID': $('#ParentID').val(), 'Code': $('#Code').val(),'Title':$('#Title').val(), 'Type': $('#Type').val(), 'ModelId': $('#ModelId').val(),'Sort':$('#Sort').val()  },
                                type: 'POST',
                                success: function (d) { if (d.Result) location.reload();else Utils.alert('消息',d.Message) },
                                error: function (status) { }
                            });
                        }
                    }, {
                        text: '取消',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
        }
    </script>
}
<div class="panel grid_8">
    <div class="panel-header">
        <span class="i-24 i-user">栏目管理</span>
    </div>
    <div class="panel-body">
        <div>
            <table style="width:100%;height:100%;margin-bottom:0;">
                <tr>
                    <td style="width:200px;background-color:#efefef;border-right:1px #ccc solid;">
                        <ul id="channelTree" class="ztree"></ul>
                    </td>
                    <td style="width:auto;">
                        <div class="panel-toolbar top clearfix">
                            <ul>
                                <li><a id="btnAdd" class="ic-16 ic-add" onclick="add();">添加</a></li>
                                <li><a id="btnAdd" class="ic-16 ic-disk" onclick="save();">保存</a></li>
                                <li><a id="btnAdd" class="ic-16 ic-edit" onclick="editMenu();">编辑</a></li>
                                <li><a id="btnDelete" class="ic-16 ic-cross" onclick="deleteAll();">删除</a></li>
                            </ul>
                        </div>
                        <div>
                            <table id="colTable" class="datatable-fn table" style="width:100%;">
                                <thead>
                                    <tr>
                                        <th style="width: 30px;"><input type="checkbox" onchange="Utils.checkAll(this.checked);" /></th>
                                        <th style="width: 100px;">栏目编码</th>
                                        <th style="width: auto;">栏目名称</th>
                                        <th style="width: 100px;">栏目类型</th>
                                        <th style="width: 300px;">模型/链接</th>
                                        <th style="width: 50px;">排序号</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div id="addDialog" class="hide">
    <div class="form-inline form">
        <div class="form-row">
            <label>栏目编码</label>
            <div class="form-item large">
                <input id="Code" class="textinput" type="text" />
            </div>
        </div>
        <div class="form-row">
            <label>栏目名称</label>
            <div class="form-item large">
                <input id="Title" class="textinput" type="text" />
            </div>
        </div>
        <div class="form-row">
            <label>栏目类型</label>
            <div class="form-item large">
                <select id="Type">
                    <option value="0">普通</option>
                    <option value="1">链接</option>
                </select>
            </div>
        </div>
        <div class="form-row">
            <label>栏目链接</label>
            <div class="form-item large">
                <input id="NavigateUrl" class="textinput" type="text" />
            </div>
        </div>
        <div class="form-row">
            <label>栏目模型</label>
            <div class="form-item large">
                <select id="ModelId">
                    @foreach (var item in ViewBag.Models)
                    {
                        <option value="@item.Id">@item.Title</option>
                    }
                </select>
            </div>
        </div>
        <div class="form-row">
            <label>排序号</label>
            <div class="form-item large">
                <input id="Sort" class="textinput" type="text" />
            </div>
        </div>
    </div>
</div>